<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <script src="/vue.global.js"></script>
    <title>5-render-function</title>
  </head>

  <body>
    <div id="render-demo" class="demo">
      <anchored-heading v-for="item in leavls" :level="item" :v-key="item"
        >标题{{item}}</anchored-heading
      >
    </div>
    <script>
      const { createApp, h } = Vue;

      const app = createApp({
        data() {
          return {
            leavls: [1, 2, 3, 4, 5, 6],
          };
        },
      });

      app.component('anchored-heading', {
        render() {
          return h(
            'h' + this.level, // tag name
            {}, // props/attributes
            this.$slots.default() // array of children
          );
        },
        props: {
          level: {
            type: Number,
            required: true,
          },
        },
      });

      app.mount('#render-demo');
    </script>
  </body>
</html>
